<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px; margin-bottom: 10px">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>酒店管理</el-breadcrumb-item>
      <el-breadcrumb-item>房间类型管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <div class="room-type-main">
      <div class="d-flex justify-content-end" style="padding: 10px;">
        <el-button type="primary" style="width: 100px;" @click="add">添加</el-button>
      </div>
      <el-table stripe border :data="roomTypeData" class="global-table" style="width: 100%;overflow: auto;">
        <el-table-column align="center" prop="name" label="名称"></el-table-column>
        <el-table-column align="center" prop="fee" label="费用"></el-table-column>
        <el-table-column align="center" prop="isolationFee" label="隔离费用"></el-table-column>
        <el-table-column align="center" prop="maxLoad" label="最大容量"></el-table-column>
        <el-table-column align="center" prop="bed" label="床位数"></el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary"
                       @click="handleModify(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="mini" type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <!--    <el-pagination-->
      <!--        class="mt-10 mb-10"-->
      <!--        background-->
      <!--        @current-change="handleCurrentChange"-->
      <!--        @prev-click="prevPage"-->
      <!--        @next-click="nextPage"-->
      <!--        layout="prev, pager, next"-->
      <!--        :total="pageNum">-->
      <!--    </el-pagination>-->


      <!-- 弹出框 -->
      <el-dialog :title="title" :visible.sync="dialogVisible" width="570px">
        <div class="contont">
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">名称:</p>
            <el-input style="width: 350px;"
                      placeholder="请输入名称" v-model="form.name" clearable>
            </el-input>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">床类型:</p>
            <el-select v-model="form.bedType" filterable multiple placeholder="请选择">
              <el-option v-for="item in bedType"
                         :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">床位数:</p>
            <el-input-number
                v-model="form.bed"
                :min="1"
                :max="6">
            </el-input-number>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">最大容量:</p>
            <el-input-number v-model="form.maxLoad" :min="1" :max="6"></el-input-number>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">是否有窗:</p>
            <div>
              <el-radio v-model="form.haveWindow" :label="1">是</el-radio>
              <el-radio v-model="form.haveWindow" :label="0">否</el-radio>
            </div>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">网络情况:</p>
            <div>
              <el-radio v-model="form.network" :label="1">是</el-radio>
              <el-radio v-model="form.network" :label="0">否</el-radio>
            </div>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">早餐:</p>
            <div>
              <el-radio v-model="form.haveBreakfast" :label="1">是</el-radio>
              <el-radio v-model="form.haveBreakfast" :label="0">否</el-radio>
            </div>
          </div>

          <!--封面图片-->
          <!--<div class="d-flex align-items-center mb-15">-->
          <!--<p class="w-100">修改头像</p>-->
          <!--<img class="user-img" :src="avatarUrl" alt="">-->
          <!--<el-upload-->
          <!--ref="upload"-->
          <!--action="#"-->
          <!--class="avatar-uploader"-->
          <!--accept="image/png,image/gif,image/jpg,image/jpeg"-->
          <!--:show-file-list="false"-->
          <!--:on-change="onChangeFile"-->
          <!--:before-upload="beforeAvatarUpload"-->
          <!--:http-request="uploadImg">-->
          <!--<el-button-->
          <!--type="success"-->
          <!--plain-->
          <!--round-->
          <!--size="mini">-->
          <!--更改头像-->
          <!--</el-button>-->
          <!--</el-upload>-->
          <!--</div>-->


          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">费用:</p>
            <el-input
                style="width: 350px;"
                v-model="form.fee" clearable>
            </el-input>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">隔离费用:</p>
            <el-input
                style="width: 350px;"
                v-model="form.isolationFee" clearable>
            </el-input>
          </div>
          <div class="d-flex align-items-center mb-15">
            <p class="w-100 text-left">排序:</p>
            <el-input-number
                v-model="form.sort" :min="0" :max="9999999">
            </el-input-number>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "RoomType",
  data() {
    return {
      pageNum: 0,
      roomTypeData: [],
      dialogVisible: false,
      title: '',
      roomTypeValue: '',
      roomId: '',

      roomTypeName: '',
      bedNum: '',
      maxNum: '',
      isWindow: '0',
      network: '0',
      breakfast: '0',
      cost: '',
      sortNum: '',
      bedType: undefined,

      form: {
        name: undefined,
        maxLoad: undefined,
        bed: undefined,
        haveWindow: undefined,
        network: undefined,
        haveBreakfast: undefined,
        sort: undefined,
        fee: undefined,
        bedType: undefined,
        isolationFee: undefined
      }

    }
  },
  methods: {
    // 获取所有房间类型列表
    getRoomTypeList() {
      let url = "http://localhost:9000/api/roomType/list";
      this.axios.get(url).then(res => {
        console.log(res);
        this.roomTypeData = res.data.data;
      })
    },
    // 获取酒店ID对应的房间类型列表
    getRoomList() {
      let url = "http://localhost:9000/api/roomType/list";
      this.axios.get(url).then(res => {
        console.log(res);
        this.roomTypeData = res.data.data;
      }).catch(err => {
        console.log(err);
      })
    },

    //添加按钮
    add() {
      this.form = {
        name: undefined,
        maxLoad: undefined,
        bed: undefined,
        haveWindow: undefined,
        network: undefined,
        haveBreakfast: undefined,
        sort: undefined,
        fee: undefined,
        bedType: undefined
      }
      this.title = '添加房间'
      this.roomTypeValue = 'add'
      this.dialogVisible = true
    },
    //修改床信息
    handleModify(index, row) {
      let split = row.bedType.split(",");
      console.log(index);
      console.log(row);
      this.form = row
      this.form.bedType = split
      this.roomId = row.id
      this.title = '修改房间类型信息'
      this.roomTypeValue = 'modify'
      this.dialogVisible = true
    },
    //删除床方法
    handleDelete(index, row) {
      this.axios.get('http://localhost:9000/api/roomType/delete/' + row.id).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
          });
          setTimeout(() => {
            this.$router.go(0)
          }, 1000)
        }
      }).catch(err => {
        console.log(err);
      })
    },

    confirm() {
      let value = this.roomTypeValue
      let data = this.form
      let bedType = ''
      for (let i = 0; i < this.form.bedType.length; i++) {
        if (this.form.bedType[i]) {
          bedType += this.form.bedType[i]
          if (i != this.form.bedType.length - 1) {
            bedType += ','
          }
        }
      }
      this.form.bedType = bedType
      if (value == 'add') {
        this.roomRequest(value, data)
      } else if (value == 'modify') {
        data.id = this.roomId
        this.roomRequest(value, data)
      }
    },
    // 房间类型请求
    roomRequest(url, data) {
      this.axios.post('http://localhost:9000/api/roomType/' + url, data).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            message: '操作成功！',
            type: 'success',
            duration: 1000
          });
          this.$router.go(0);
        } else if (res.data.code == 1001) {
          this.$message({
            message: res.data.msg,
            type: 'warning',
            duration: 1000
          });

        }
      }).catch(err => {
        console.log(err);
      })
    }
  },
  mounted() {
    this.getRoomList();
    this.getRoomTypeList();
  }
}
</script>

<style scoped>

</style>